<template>
  <transition name="move">
    <div class="good-detail" v-show="show" ref="goodDetail">
      <div>
        <div class="image-header">
          <img :src="food.image"/>
          <span class="icon-arrow_lift" @click="fnHide"></span>
        </div>
        <div class="content">
          <h1 class="title">{{food.name}}</h1>
          <div class="count">
            <span>月售{{food.sellCount}}份</span><span class="rating-count">好评率{{food.rating}}%</span>
          </div>
          <div class="food-price">
            <div>
              <span class="price"><span style="font-size: 10px;font-weight: normal;">￥</span>{{food.price}}</span>
              <span class="oldPrice" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>
            <div>
              <div class="add-cart" v-if="!food.count" @click="fnAddCart">加入购物车</div>
              <cart-control :food="food" v-else></cart-control>
            </div>
          </div>
        </div>
        <div class="info" v-show="food.info">
          <h1>商品介绍</h1>
          <div class="desc">{{food.info}}</div>
        </div>
        <!--评价-->
        <div class="rating">
          <h1>商品评价</h1>
          <rating-select :ratings="food.ratings" :select-type="selectType" :only-content="onlyContent" :desc="desc"
                         @emit-sel-type="emitSelType" @emit-only-cnt="emitOnlyCnt"></rating-select>
          <div class="rating-wrapper" v-show="fnNeedShow(item.rateType,item.text)" v-for="item in food.ratings">
            <ul>
              <li class="rating-item">
                <div class="item-top">
                  <span class="rate-time">{{item.rateTime | fmtDate}}</span>
                  <div>
                    <span class="username">{{item.username}}</span><img :src="item.avatar" class="avatar">
                  </div>
                </div>
                <div class="item-bottom">
                  <span class="icon-thumb icon-thumb_up" v-show="item.rateType === 0"></span><span
                  class="icon-thumb icon-thumb_down" v-show="item.rateType === 1"></span>
                  <span class="text">{{item.text}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评论...</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import CartControl from '../cartcontrol/CartControl'
  import BScroll from 'better-scroll'
  import RatingSelect from '../ratingselect/RatingSelect'

  // 常量
  // const POSITIVE = 0 // 推荐
  // const NEGATIVE = 1 // 吐槽
  const ALL = 2 // 全部

  export default {
    props: {
      food: {
        type: Object
      }
    },
    data () {
      return {
        // 是否展示商品詳情
        show: false,
        // 标志[全部 - 推荐 - 吐槽]中选中的哪一状态
        selectType: ALL,
        // 是否只显示有内容的评论
        onlyContent: false,
        // 按钮的文字
        desc: {
          all: '全部',
          positive: '推荐',
          negative: '吐槽'
        }
      }
    },
    components: {
      CartControl,
      RatingSelect
    },
    methods: {
      // 展示商品详细页
      fnShow () {
        this.show = true
        // 初始化
        this.selectType = ALL
        this.onlyContent = false
        // 页面滚动
        this.$nextTick(() => {
          if (!this.detailScroll) {
            this.detailScroll = new BScroll(this.$refs.goodDetail, {
              click: true
            })
          } else {
            this.detailScroll.refresh()
          }
        })
      },
      // 隐藏商品详细页
      fnHide () {
        this.show = false
      },
      // 加入购物车
      fnAddCart () {
        // 新增不存在的元素必须用Vue.set()，否则无效
        Vue.set(this.food, 'count', 1)
      },
      // rating-select组件返回值 -> selectType
      emitSelType (selType) {
        this.selectType = selType
        this.$nextTick(() => {
          this.detailScroll.refresh()
        })
      },
      // rating-select组件返回值 -> onlyContent
      emitOnlyCnt (onlyCnt) {
        this.onlyContent = onlyCnt
        this.$nextTick(() => {
          this.detailScroll.refresh()
        })
      },
      // 控制评价的显示
      fnNeedShow (type, text) {
        if (this.onlyContent && !text) {
          return false
        }
        if (this.selectType === ALL) {
          return true
        } else {
          return type === this.selectType
        }
      }
    }

  }
</script>

<style lang="scss" scoped>
  .good-detail {
    position: fixed;
    top: 0;
    bottom: 46px;
    left: 0;
    background: #f3f5f7;
    z-index: 30;
    width: 100%;
    transition: all 0.2s linear;
    &.move-enter-active, &.move-leave {
      transform: translate3d(0, 0, 0);
    }
    &.move-enter, &.move-leave-active {
      transform: translate3d(100%, 0, 0);
    }

    .image-header {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 100%;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .icon-arrow_lift {
        position: absolute;
        top: 5%;
        left: 5%;
        font-size: 20px;
        color: #fff;
      }
    }

    .content {
      width: 100%;
      padding: 18px;
      margin-bottom: 18px;
      box-sizing: border-box;
      background: #fff;
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      .title {
        font-size: 14px;
        font-weight: 700;
        color: rgb(7, 17, 27);
        line-height: 14px;
        padding-bottom: 8px;
      }
      .count {
        font-size: 10px;
        color: rgb(147, 153, 159);
        line-height: 10px;
        padding-bottom: 18px;
        .rating-count {
          margin-left: 12px;
        }
      }
      .food-price {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 0;
        .price {
          font-size: 14px;
          color: rgb(240, 20, 20);
          font-weight: 700;
          margin-right: 8px;
        }
        .oldPrice {
          font-size: 10px;
          color: rgb(147, 153, 159);
          text-decoration: line-through;
          vertical-align: top;
        }
      }
      .add-cart {
        width: 74px;
        height: 24px;
        line-height: 24px;
        border-radius: 24px;
        background: rgb(0, 160, 220);
        font-size: 12px;
        color: rgb(255, 255, 255);
        padding: 6px 12px;
        text-align: center;
      }
    }

    .info {
      width: 100%;
      padding: 18px;
      margin-bottom: 18px;
      background: #fff;
      box-sizing: border-box;
      border-top: 1px solid rgba(7, 17, 27, .1);
      border-bottom: 1px solid rgba(7, 17, 27, .1);
      h1 {
        font-size: 14px;
        font-weight: 500;
        color: rgb(7, 17, 27);
        line-height: 14px;
        padding-bottom: 6px;
      }
      .desc {
        font-size: 12px;
        font-weight: 200;
        color: rgb(77, 85, 93);
        line-height: 24px;
        padding-left: 8px;
      }
    }

    /*评价*/
    .rating {
      padding-top: 18px;
      background: #fff;
      border-top: 1px solid rgba(7, 17, 27, .1);
      h1 {
        padding-left: 18px;
        font-size: 14px;
        font-weight: 500;
        color: rgb(7, 17, 27);
        line-height: 14px;
      }

      .rating-wrapper {
        width: 100%;
        padding: 0 18px;
        background: #fff;
        box-sizing: border-box;
        .rating-item {
          padding: 16px 0;
          border-bottom: 1px solid rgba(7, 17, 27, .1);
          .item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 6px;
            .rate-time {
              font-size: 10px;
              color: rgb(147, 153, 157);
              line-height: 12px;
            }
            .username {
              font-size: 10px;
              color: rgb(147, 153, 157);
              line-height: 12px;
              padding-right: 6px;
              vertical-align: middle;
            }
            .avatar {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              vertical-align: middle;
            }
          }
          .item-bottom {
            font-size: 0;
            .icon-thumb {
              font-size: 12px;
              line-height: 24px;
              padding-right: 4px;
              &.icon-thumb_up {
                color: rgb(0, 160, 220);
              }
              &.icon-thumb_down {
                color: rgb(147, 153, 159);
              }
            }
            .text {
              font-size: 12px;
              color: rgb(7, 17, 27);
              line-height: 24px;
            }
          }
        }
      }

      .no-rating {
        background: #fff;
        font-size: 12px;
        padding: 16px 18px;
        box-sizing: border-box;
        color: rgb(147, 153, 159);
      }
    }
  }
</style>
